<template>
    <form method="post">
        <div style="width: 100%">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 50%; height: 100%; float: left">
                <font style="font-size: 25px; font-family: 微软雅黑">摄像头信息</font>
            </div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <br><br>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="摄像头编号" prop="cameraCode">
                            <el-input v-model="ruleForm.cameraCode" placeholder="请填写地块号" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头名称" prop="cameraName">
                            <el-input v-model="ruleForm.cameraName" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="摄像头型号" prop="cameraModel">
                            <el-input v-model="ruleForm.cameraModel" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头类型" prop="camera_type">
                            <el-input v-model="ruleForm.camera_type" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="摄像头坐标" prop="cameraZb">
                            <el-input v-model="ruleForm.cameraZb" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="摄像头IP地址" prop="cameraIp">
                            <el-input v-model="ruleForm.cameraIp" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属项目" prop="proBelong">
                            <el-input v-model="ruleForm.proBelong" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="布置日期" prop="setDate">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.setDate"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <br />
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button @click="saveOrUpdate()" class="bthNormal">保存</el-button>
                        <el-button @click="shutdown()" class="bthNormal">关闭</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </form>
</template>

<script>
import label from '../../../../api/lx_infor/camera';
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            ruleForm: {
                cameraCode: '',
                cameraName: '',
                cameraModel: '',
                camera_type: '',
                cameraZb: '',
                cameraIp: '',
                proBelong: '',
                setDate: ''
            },
            rules: {
                // xmname: [
                //     { required: true, message: '请输入项目名称', trigger: 'blur' }
                //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],

                cameraCode: [{ required: true, message: '请填写摄像头编号', trigger: 'change' }],
                cameraName: [{ required: true, message: '请填写摄像头名称', trigger: 'change' }],
                cameraModel: [{ required: true, message: '请填写摄像头型号', trigger: 'change' }],
                camera_type: [{ required: true, message: '请填写摄像头类型', trigger: 'change' }],
                cameraZb: [{ required: true, message: '请填写摄像头坐标', trigger: 'change' }],
                cameraIp: [{ required: true, message: '请填写摄像头IP地址', trigger: 'change' }],
                proBelong: [{ required: true, message: '请选择所属项目', trigger: 'change' }],
                setDate: [{ required: true, message: '请选择布置日期', trigger: 'change' }]
            }
        };
    },
    created() {
        this.init();
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        init() {
            //判断路径有id值,做修改
            if ($('#idframe', window.parent.document).attr('data-id')) {
                //从路径获取id值
                const id = $('#idframe', window.parent.document).attr('data-id');
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
                this.ruleForm = {};
            }
        },
        saveOrUpdate() {
            //判断修改还是添加
            //根据teacher是否有id
            if (!this.ruleForm.id) {
                //添加
                this.onSubmit();
            } else {
                //修改
                this.update();
            }
        },
        onSubmit() {
            label.save(this.ruleForm).then((Response) => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            });
        },
        tonew() {
            this.ruleForm = {};
        },
        shutdown() {
            window.close();
        },
        getInfo(id) {
            label.openInfo(id).then((response) => {
                this.ruleForm = response.data;
            });
        },
        update() {
            label.updateInfo(this.$route.query.id, this.ruleForm).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            });
        }
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
#id_tabs div.el-tabs__content {
    padding: 0;
}
</style>